<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div id="hy">
        <h1>{{a}}</h1>
        <button @click="add">+</button>
    </div> -->

    <div id="lei">
        <h1 v-if="age===0">阿飞的一生</h1>
        <h1 v-else-if="age==1">莫欺少年穷</h1>
        <h1 v-else-if="age==2">莫欺中年穷</h1>
        <h1 v-else-if="age==3">莫欺老年穷</h1>
        <h1 v-else>死者为大</h1>
        <button @click="age++">我命由我不由天</button>
    </div>

</body>
<script src="./vue.js"></script>
<script>
    const{createApp,ref} = Vue;

    const app = createApp({
         setup(){
            let age = ref(0)          
            return{
                age
            }
         }
    })
    app.mount('#lei')






    // const{createApp,ref} = Vue;

    // const app = createApp({
    //     setup(){
    //         let a = ref(1)
    //         function add(){
    //             a.value += 10;
    //         }
    //         return {
    //             a,
    //             add
    //         }
    //     }
    // })
    // app.mount('#hy')
</script>
</html>